<template>
  <div class="search-box">
    <div class="search-result">
      <span v-show="keyword" class="search-count">三叶为您找到相关结果约 {{dataList.length}} 个</span>
      <span v-show="keyword" class="search-keyword">关键词："{{keyword}}"</span>
      <span v-show="!keyword" class="search-count">您未输入任何搜索关键词</span>
      <span v-show="!keyword" class="search-keyword">下面是三叶为您推荐的热门搜索</span>
    </div>
    <div v-if="dataList.length > 0" class="content" v-loading="listLoading">
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item, index) in dataList" :key="index">
          <card :dataList="item" :cardWidth="590" />
        </el-col>
      </el-row>
    </div>
    <div v-else class="content">
      <h1>咦!没有找到你想要的哦!</h1>
      <h2>不如换个条件再试试~</h2>
      <el-image fit="contain" src="https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646"></el-image>
    </div>
  </div>
</template>

<script>
import card from "@/components/Card";
import { getSearch } from "@/api/homepage";
export default {
  name: "search",
  components: {
    card
  },
  data() {
    return {
      dataList: [{}],
      listLoading: false,
      keyword: ""
    };
  },
  created() {
    this.getSearchList();
  },
  mounted() {},
  methods: {
    getSearchList() {
      this.listLoading = true;
      this.keyword = this.$route.query.keyword;
      getSearch({ keyword: this.keyword }).then(res => {
        this.dataList = res.data;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style lang="scss">
.search-box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 112px;
  padding-top: 68px;
  .search-result {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid rgba(6, 27, 65, 0.08);
    border-top: 1px solid rgba(6, 27, 65, 0.08);
    padding: 28px 0;
    .search-count {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 600;
      color: rgba(6, 27, 65, 0.65);
      line-height: 20px;
      margin-bottom: 9px;
    }
    .search-keyword {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 600;
      color: rgba(6, 27, 65, 0.45);
      line-height: 12px;
    }
  }
  .content {
  }
  .page {
    margin-top: 24px;
  }
}

.search-box .el-row .el-col:nth-child(5) .card {
  margin-bottom: 20px;
}

.search-box .el-row .el-col:nth-child(6) .card {
  margin-bottom: 20px;
}
</style>